import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { InputItem, NoticeBar ,Icon} from 'antd-mobile'




class AccountProfit extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: 0,
    }
    this.onClick = this.onClick.bind(this)
  }
  onClick(i) {
    if( i == this.state.active) {
      return
    }
    this.setState({
      active : i
    })
  }
  render() {
    return (
      <div className="accoutn-profit-loss">
        <ul>
          <li className="profit-one">
            <div className="account-left">
              <span>
                <FormattedMessage
                  id='totalAssets'
                />
              </span>
              <span className="-number">13980.00</span>
            </div>
            <div className="account-left account-right">
              <span>
                <FormattedMessage
                  id='accountbalance'
                />
              </span>
              <span className="-number">13980.00</span>
            </div>
          </li>
          <li className="profit-one">
            <div className="account-left">
              <span>
                <FormattedMessage
                  id='availableFunds'
                />
              </span>
              <span className="-number">13980.00</span>
            </div>
            <div className="account-left account-right">
              <span>
                <FormattedMessage
                  id='depositused'
                />
              </span>
              <span className="-number">13980.00</span>
            </div>
          </li>
          <li className="profit-one">
            <div className="account-left">
              <span>
                <FormattedMessage
                  id='achieveprofitandloss'
                />
              </span>
              <span className="-green -number">+13980.00</span>
            </div>
            <div className="account-left account-right">
              <span>
                <FormattedMessage
                  id='floating'
                />
              </span>
              <span className="-red -number">-200.80</span>
            </div>
          </li>
          <li className="-last">
            <div>
              <span>
                <FormattedMessage
                  id='marginratio'
                />
              </span>
              <span>
                <div className="-out">
                  <div className="-inner" style={{width:'90%'}}></div>
                </div>
              </span>
            </div>
            <div>90%</div>
          </li>
        </ul>
      </div>
    )
  }
}

export default AccountProfit

